$(function() {
	(function() {
		$(".monitor .tabs").on("click", "a", function() {
			$(this).addClass('active').siblings().removeClass('active');
			$(".monitor .content").eq($(this).index()).show().siblings(".content").hide();
		});
		$(".marquee-view .marquee").each(function() {
			// console.log($(this));
			var rows = $(this).children().clone();
			$(this).append(rows);
		});
	})();
	(function() {
		var myChart = echarts.init(document.querySelector('.pie'));
		var option = {

			tooltip: {
				trigger: 'item',
				formatter: '{a} <br/>{b} : {c} ({d}%)'
			},
			color: [
				"#006cff",
				"#60cda0",
				"#ed8884",
				"#ff9f7f",
				"#0096ff",
				"#9fe6b8",
				"#32c5e9",
				"#1d9dff"
			],
			series: [{
				name: '点位分布统计',
				type: 'pie',
				radius: ['15%', '70%'],
				center: ['50%', '50%'],
				roseType: 'area',
				data: [{
						value: 12,
						name: '云南'
					},
					{
						value: 23,
						name: '北京'
					},
					{
						value: 13,
						name: '山东'
					},
					{
						value: 25,
						name: '河北'
					},
					{
						value: 20,
						name: '江苏'
					},
					{
						value: 33,
						name: '浙江'
					},
					{
						value: 28,
						name: '四川'
					},
					{
						value: 42,
						name: '湖北'
					}
				],
				label: {
					fontSize: 13
				},
				labelLine: {
					// 连接到图形的线长度
					length: 6,
					// 连接到文字的线长度
					length2: 8
				}
			}],


		};
		myChart.setOption(option);
		window.addEventListener('resize', function() {
			myChart.resize()
		})
	})();
	(function() {
		var myChart = echarts.init(document.querySelector('.bar'));
		var item = {
			name: '',
			value: 1200,
			// 柱子颜色
			itemStyle: {
				color: '#254065'
			},
			// 鼠标经过柱子颜色
			emphasis: {
				itemStyle: {
					color: '#254065'
				}
			},
			// 工具提示隐藏
			tooltip: {
				extraCssText: 'opacity:0'
			},
		}
		var option = {
			name: '',
			value: 1200,

			// 柱子颜色
			itemStyle: {
				color: new echarts.graphic.LinearGradient(
					// (x1,y2) 点到点 (x2,y2) 之间进行渐变
					0, 0, 0, 1,
					[{
							offset: 0,
							color: '#00fffb'
						}, // 0 起始颜色
						{
							offset: 1,
							color: '#0061ce'
						} // 1 结束颜色
					]
				),

			},
			// 鼠标经过柱子颜色
			emphasis: {
				itemStyle: {
					color: '#254065'
				}
			},
			// 工具提示隐藏
			tooltip: {
				// extraCssText: 'opacity:0'
			},
			grid: {
				left: '0%',
				right: '3%',
				bottom: '3%',
				top: '3%',
				containLabel: true,
				show: true,
				borderColor: 'rgba(0, 240, 255, 0.3)'
			},
			xAxis: [{
				type: 'category',
				data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
				axisTick: {
					// 不显示刻度
					show: false
				},
				axisLabel: {
					color: '#4c9bfd'
				},
				// x坐标轴颜色设置
				axisLine: {
					lineStyle: {
						color: 'rgba(0, 240, 255, 0.3)',
						// width:8,  x轴线的粗细
						// opcity: 0,   如果不想显示x轴线 则改为 0
					}
				}
			}],
			yAxis: [{
				type: 'value',
				axisLabel: {
					color: '#4c9bfd'
				},
				axisTick: {
					// 不显示刻度
					show: false
				},
				axisLine: {
					lineStyle: {
						color: 'rgba(0, 240, 255, 0.3)',
						// width:8,  x轴线的粗细
						// opcity: 0,   如果不想显示x轴线 则改为 0
					}
				},
				// y轴 分割线的样式 
				splitLine: {
					lineStyle: {
						color: 'rgba(0, 240, 255, 0.3)'
					}
				}
			}],
			series: [{
				name: '',
				type: 'bar',
				barWidth: '60%',
				data: [2100, 1900, 1700, 1560, 1400, item, item, item, 900, 750, 600, 480, 240],

			}]
		};

		myChart.setOption(option);
		window.addEventListener('resize', function() {
			myChart.resize()
		})
	})();
	(function() {
		var data = [
			day365 = {
				orders: '20,301,987',
				amount: '99834'
			},
			day90 = {
				orders: '301,987',
				amount: '9834'
			},
			day30 = {
				orders: '1,987',
				amount: '3834'
			},
			day1 = {
				orders: '987',
				amount: '834'
			}
		]
		var num = 0
		var Orders = $('.order h4:eq(0)')
		var Amount = $('.order h4:eq(1)')
		$(".filter").on("click", "a", function() {
			$(this).addClass('active').siblings().removeClass('active');
			var currdata = data[$(this).index()]
			Orders.html(currdata.orders)
			Amount.html(currdata.amount)
			num = $(this).index()
		});


		var timer = setInterval(function() {
			if (num == 4) {
				num = 0
			}
			$('.filter a').eq(num).trigger('click')
			num++
		}, 1000)
		$('.order').mouseover(function() {
			clearInterval(timer)
			timer = null;
		})
		$('.order').mouseout(function() {
			timer = setInterval(function() {
				if (num > 3) {
					num = 0
				}
				$('.filter a').eq(num).trigger('click')
				num++
			}, 1000)
		})
	})();

	(function() {
		// 1. 实例化对象
		var myChart = echarts.init(document.querySelector(".line"));
		// 2. 指定配置和数据
		var option = {
			tooltip: {
				trigger: "axis"
			},
			legend: {
				textStyle: {
					color: '#4c9bfd' // 图例文字颜色
				},
				right: '10%' // 距离右边10%
			},
			grid: {
				top: '20%',
				left: '3%',
				right: '4%',
				bottom: '3%',
				show: true, // 显示边框
				borderColor: '#012f4a', // 边框颜色
				containLabel: true // 包含刻度文字在内
			},

			xAxis: {
				type: 'category',
				data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
				axisTick: {
					show: false // 去除刻度线
				},
				axisLabel: {
					color: '#4c9bfd' // 文本颜色
				},
				axisLine: {
					show: false // 去除轴线
				},
				boundaryGap: false // 去除轴内间距
			},
			yAxis: {
				type: 'value',
				axisTick: {
					show: false // 去除刻度
				},
				axisLabel: {
					color: '#4c9bfd' // 文字颜色
				},
				splitLine: {
					lineStyle: {
						color: '#012f4a' // 分割线颜色
					}
				}
			},
			color: ['#00f2f1', '#ed3f35'],
			series: [{
				name: '预期销售额',
				data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
				type: 'line',
				smooth: true
			}, {
				name: '实际销售额',
				data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
				type: 'line',
				smooth: true
			}],
		};

		// 3. 把配置和数据给实例对象
		myChart.setOption(option);
		var data = {
			year: [
				[24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
				[40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
			],
			quarter: [
				[23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
				[43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
			],
			month: [
				[34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
				[56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
			],
			week: [
				[43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
				[32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
			]
		}
		var num = 0
		$('.sales').on('click', '.caption a', function() {
			$(this).addClass('active').siblings().removeClass('active');
			// currData 当前对应的数据
			// this.dataset.type 标签上的data-type属性值，对应data中的属性                  
			var currData = data[this.dataset.type]
			// 修改图表1的数据
			option.series[0].data = currData[0]
			// 修改图表2的数据                  
			option.series[1].data = currData[1]
			// 重新设置数据  让图标重新渲染                  
			myChart.setOption(option)
			num = $(this).index() - 1
		})

		var timer = setInterval(function() {
			if (num == 4) {
				num = 0
			}
			$('.caption a').eq(num).trigger('click')
			num++


		}, 1000)
		$('.sales').mouseover(function() {
			clearInterval(timer)
			timer = null;
		})
		$('.sales').mouseout(function() {
			timer = setInterval(function() {
				if (num == 4) {
					num = 0
				}
				$('.caption a').eq(num).trigger('click')
				num++
			}, 1000)
		})
		window.addEventListener("resize", function() {
			// 让我们的图表调用 resize这个方法
			myChart.resize();
		});
	})();
	(function() {
		var myChart = echarts.init(document.querySelector('.radar'));


		var data = [
			[90, 19, 56, 11, 34],

		];

		var lineStyle = {
			normal: {
				color: '#fff',
			}
		};

		var option = {
			tooltip: {
				show: true,
				// 控制提示框组件的显示位置
				position: ['60%', '10%'],
			},
			radar: {
				center: ['50%', '50%'],
				// 外半径占据容器大小
				radius: '65%',
				indicator: [{
						name: '机场',
						max: 100
					},
					{
						name: '商场',
						max: 100
					},
					{
						name: '火车站',
						max: 100
					},
					{
						name: '汽车站',
						max: 100
					},
					{
						name: '地铁',
						max: 100
					}
				],
				shape: 'circle',
				splitNumber: 4,
				name: {
					textStyle: {
						color: '#4c9bfd'
					}
				},
				splitLine: {
					lineStyle: {
						color: [
							'rgba(238, 197, 102, 0.1)', 'rgba(238, 197, 102, 0.2)',
							'rgba(238, 197, 102, 0.4)', 'rgba(238, 197, 102, 0.6)',
							'rgba(238, 197, 102, 0.8)', 'rgba(238, 197, 102, 1)'
						].reverse()
					}
				},
				splitArea: {
					show: false,
				},
				axisLine: {
					show: true,
					lineStyle: {
						color: 'rgba(255, 255, 255, 0.5)'
					}
				},
				symbol: 'circle',
				// 拐点的大小  
				symbolSize: 5,
				// 小圆点（拐点）设置为白色
				itemStyle: {
					color: '#fff'
				},
				label: {
					show: true,
					color: '#fff',
					fontSize: 10
				},
			},
			series: [{
					name: '北京',
					type: 'radar',
					symbolSize: 5,
					// 设置小圆点颜色
					itemStyle: {
						color: "#fff"
					},
					data: data,
					symbol: 'circle',
					label: {
						show: true,
						color: '#fff',
						fontSize: 10
					},
					areaStyle: {
						color: "rgba(238, 197, 102, 0.6)",

					}
				},

			]
		};
		myChart.setOption(option);
		// function throttle(fn, delay) {
		// 				var flag = true
		// 				return function() {
		// 					if (!flag) {
		// 						return false;
		// 					}
		// 					flag = false
		// 					setTimeout(()=>{
		// 						fn()
		// 						flag = true
		// 					},delay)
		// 				}
		// 			}
		// 		// var timer =setTimeout(refresh, 150);
		// 		function fn(){
		// 			window.addEventListener('resize', function() {
		// 			console.log(1)
		// 			myChart.resize()
		// 		});


		// function refresh() {
		// 	console.log(1)
		// 	myChart.resize()
		// };
		// function setTimeToDo(to){
		var timer = setTimeout(refresh, 150);
		window.addEventListener('resize', function() {
			clearTimeout(timer);
			timer = setTimeout(refresh, 150);
		});

		function refresh() {
			console.log(1)
			myChart.resize()
		};
	})();
	(function() {
		// 1. 实例化对象
		var myChart = echarts.init(document.querySelector(".gauge"));
		// 2. 指定数据和配置
		var option = {
			series: [{
				type: 'pie',
				// 放大图形
				radius: ['130%', '150%'],
				// 移动下位置  套住50%文字
				center: ['48%', '80%'],
				label: {
					normal: {
						show: false
					}
				},
				// 起始角度，支持范围[0, 360]
				startAngle: 180,
				hoverOffset: 0,
				data: [{
						value: 150,
						itemStyle: {
							// 颜色渐变#00c9e0->#005fc1
							color: new echarts.graphic.LinearGradient(
								// (x1,y2) 点到点 (x2,y2) 之间进行渐变
								0,
								0,
								0,
								1,
								[{
										offset: 0,
										color: "#00c9e0"
									}, // 0 起始颜色
									{
										offset: 1,
										color: "#005fc1"
									} // 1 结束颜色
								]
							)
						}
					},
					{
						value: 50,
						itemStyle: {
							color: '#12274d'
						}
					},
					{
						value: 200,
						itemStyle: {
							color: 'transparent'
						}
					},
				]
			}]
		}
		// 3. 把数据和配置给实例对象
		myChart.setOption(option);
	})();
	(function() {
			var hotData = [{
					city: '北京', // 城市
					sales: '25, 179', // 销售额
					flag: true, //  上升还是下降
					brands: [ //  品牌种类数据
						{
							name: '可爱多',
							num: '9,086',
							flag: true
						},
						{
							name: '娃哈哈',
							num: '8,341',
							flag: true
						},
						{
							name: '喜之郎',
							num: '7,407',
							flag: false
						},
						{
							name: '八喜',
							num: '6,080',
							flag: false
						},
						{
							name: '小洋人',
							num: '6,724',
							flag: false
						},
						{
							name: '好多鱼',
							num: '2,170',
							flag: true
						},
					]
				},
				{
					city: '河北',
					sales: '23,252',
					flag: false,
					brands: [{
							name: '可爱多',
							num: '3,457',
							flag: false
						},
						{
							name: '娃哈哈',
							num: '2,124',
							flag: true
						},
						{
							name: '喜之郎',
							num: '8,907',
							flag: false
						},
						{
							name: '八喜',
							num: '6,080',
							flag: true
						},
						{
							name: '小洋人',
							num: '1,724',
							flag: false
						},
						{
							name: '好多鱼',
							num: '1,170',
							flag: false
						},
					]
				},
				{
					city: '上海',
					sales: '20,760',
					flag: true,
					brands: [{
							name: '可爱多',
							num: '2,345',
							flag: true
						},
						{
							name: '娃哈哈',
							num: '7,109',
							flag: true
						},
						{
							name: '喜之郎',
							num: '3,701',
							flag: false
						},
						{
							name: '八喜',
							num: '6,080',
							flag: false
						},
						{
							name: '小洋人',
							num: '2,724',
							flag: false
						},
						{
							name: '好多鱼',
							num: '2,998',
							flag: true
						},
					]
				},
				{
					city: '江苏',
					sales: '23,252',
					flag: false,
					brands: [{
							name: '可爱多',
							num: '2,156',
							flag: false
						},
						{
							name: '娃哈哈',
							num: '2,456',
							flag: true
						},
						{
							name: '喜之郎',
							num: '9,737',
							flag: true
						},
						{
							name: '八喜',
							num: '2,080',
							flag: true
						},
						{
							name: '小洋人',
							num: '8,724',
							flag: true
						},
						{
							name: '好多鱼',
							num: '1,770',
							flag: false
						},
					]
				},
				{
					city: '山东',
					sales: '20,760',
					flag: true,
					brands: [{
							name: '可爱多',
							num: '9,567',
							flag: true
						},
						{
							name: '娃哈哈',
							num: '2,345',
							flag: false
						},
						{
							name: '喜之郎',
							num: '9,037',
							flag: false
						},
						{
							name: '八喜',
							num: '1,080',
							flag: true
						},
						{
							name: '小洋人',
							num: '4,724',
							flag: false
						},
						{
							name: '好多鱼',
							num: '9,999',
							flag: true
						},
					]
				}
			]

			var supHTML = "";

			$.each(hotData, function(index, item) {
				// console.log(item);
				supHTML +=
					`<li><span>${item.city}</span><span> ${item.sales} <s class=
		   ${item.flag ? "icon-up" : "icon-down"}></s></span></li>`;
			});
			$(".sup").html(supHTML);
			$('.sup').on('mouseover', 'li', function() {
				mouseOver($(this))
				index = $(this).index()
			});
			mouseOver($('.sup').children().eq(0))

			var index = 0
			var timer = setInterval(function() {
				index++
				if (index >= 5) {
					index = 0
				} else {
					mouseOver($('.sup').children().eq(index))
				}
			}, 1000)
			$('.sup li').hover(function() {
				clearInterval(timer);
				timer = null
			}, function() {
				timer = setInterval(function() {
					index++
					if (index >= 5) {
						index = 0
					} else {
						mouseOver($('.sup').children().eq(index))
					}
				}, 2000)
			})
		

		function mouseOver(a) {
			a.addClass('active').siblings().removeClass('active')
			var index = a.index()
			var currentData = hotData[index].brands
			var subHTML = "";
			$.each(currentData, function(index, item) {
				subHTML +=
					`<li><span>${item.name}</span><span> ${item.num} <s class=
			${item.flag ? "icon-up" : "icon-down"}></s></span></li>`;
			})
			$(".sub").html(subHTML);
		}
	})()
})
